<template>
  <!-- 分享好友 -->
  <div class="information-content-h5">
    <h1 class="information-content-h5__title">
      <h3 @click="goBack"><i-teenyicons-arrow-left-solid /> {{ title }}</h3>
    </h1>
    <van-tabs v-model:active="active">
      <van-tab :title="item.activity.title" v-for="item in navs" :key="item.activity.id"></van-tab>
    </van-tabs>
    <div class="invite-friends-h5" v-for="item in navs" :key="item.activity.id">
      <h6>{{ t("inviteFriend.text9") }}</h6>
      <dl class="invite-friends-h5-way">
        <dt>{{t("inviteFriend.text10")}}:</dt>
        <dd><p>{{user.id}}</p> <span @click="copy(user.id)">复制</span></dd>
        <hr />
        <dt>{{t("inviteFriend.text12")}}:</dt>
        <dd><p>{{website}}</p> <span @click="copy(website)">复制</span></dd>
        <hr />
        <dt>{{t("inviteFriend.text13")}}:</dt>

        <dd class="no-flex"> <QrcodeVue :value="website" :size="190" level="H" id="qrcode"/><span @click="downloadImage('qrcode')">下载</span></dd>
      </dl>
      <h6>{{ t("inviteFriend.text15") }}</h6>
      <div class="invite-friends-h5-list">
        <dl>
          <dt>{{ t("inviteFriend.text21") }}</dt>
          <dd>
            <p>
              {{t("inviteFriend.text22")}}
              <span>{{item.voList.length}}{{t("inviteFriend.text23")}}</span>
            </p>
            <p>
              {{t("inviteFriend.text24")}}
              <span>0</span>
            </p>
          </dd>
        </dl>
        <table class="invite-friends-h5-table" border="0">
          <thead>
            <tr>
              <th>{{t("inviteFriend.text27")}}</th>
              <th>{{t("inviteFriend.text28")}}</th>
              <th>{{t("inviteFriend.text29")}}</th>
              <th>{{t("inviteFriend.text30")}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in rewardTableList" :key="item.id" >
              <td>{{item.invitees}}</td>
              <td>{{item.giftAmount}}</td>
              <td>{{item.preferentialAudit}}</td>
              <td>{{item.depositRequirements}}</td>
            </tr>
          </tbody>
        </table>
        <div class="invite-friends-h5-content" v-html="item.activity.content"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="InviteFriends">
import userinfoApi from '@/api/modules/userinfo';
import system from '@/store/system';
import userinfo from '@/store/userinfo';
import { copy, downloadImage } from '@/utils/format';

const { t } = useI18n();
const emits = defineEmits(['back']);
const piniaUserinfo:any = userinfo();
const piniaSystem:any = system();

const props = defineProps({
  title: {
    type: String,
    default: ""
  }
});


const data:any = reactive({
  user: computed(()=>piniaUserinfo.getUserinfo.user),
  website: `${window.location.origin + window.location.pathname}/?promote=${piniaUserinfo.getUserinfo.user.id}`,
  active: 1,
  navs: [],
  totalAmount: 0,
  rewardTableList: []
});

const {
  user,
  website,
  active,
  navs,
  totalAmount,
  rewardTableList
} = toRefs(data);

const getActivityFriends = () => {
  userinfoApi.getActivityFriendsTwo({}).then((response:any) => {
    if(response.code === 200){
      totalAmount.value = 0;
      navs.value = response.data;
      changeLang();
    }
  })
}
getActivityFriends();

// 改变语言
const changeLang = () => {
  navs.value.forEach((element:any) => {
    console.log(element);
    const currContent = element.activity.listContent.find((im:any)=>im.languageCode == piniaSystem.getLang.code);
    const currPic = element.activity.listPic.find((im:any)=>im.languageCode == piniaSystem.getLang.code);
    const currTitle = element.activity.listTitle.find((im:any)=>im.languageCode == piniaSystem.getLang.code);
    element.activity.content = currContent.activityContent;
    element.activity.pic = currPic.content;
    element.activity.title = currTitle.content;
    element.voList.forEach((item:any) => {
      totalAmount.value += item.allMoney
    });
    if (element.joinList.length == 0) { // 没有福袋信息
      if (element.voList.length > 0) rewardTableList.value = element.list || [];
    } else { //有福袋信息
      element.list.splice(0, element.joinList.length)
      rewardTableList.value = element.joinList.concat(element.list)
    }
  });
}

const goBack = () => {
  emits('back');
}
</script>

<style lang="scss" scoped>
@import url(./index.scss);
.invite-friends-h5{
  h6{
    font-weight: 600;
    color: var(--z-font-anti);
    margin: var(--rem-25) 0 var(--rem-15) var(--rem-20);
  }
  .invite-friends-h5-way{
    background-color: var(--z-bg-card);
    margin: 0 var(--rem-14) 0;
    border-radius: var(--rem-10);
    padding: var(--rem-20);
    dt{
      font-size: var(--rem-13);
      color: var(--z-font-def);
      line-height: 1;
    }
    dd{
      margin-top: var(--rem-12);
      display: flex;
      align-items: center;
      color: var(--z-font-anti);
      &.no-flex{
        align-items: flex-end;
        justify-content: flex-end;
        canvas{
          display: inline-block;
          padding: var(--rem-10);
          background-color: #fff;
        }
      }
      span{
        line-height: 1;
        font-size: var(--rem-11);
        border-radius: var(--rem-20);
        color: var(--z-bg-btn);
        border: 1px solid var(--z-bg-btn);
        background-color: var(--z-bg-card);
        padding: 0 var(--rem-8);
        margin-left: var(--rem-10);
        white-space: nowrap;
        line-height: var(--rem-21);
      }
    }
    hr{
      width: 100%;
      border-radius: var(--rem-12);
      border-width: var(--rem-1);
      border-color: var(--border-color);
      margin-top: var(--rem-20);
      margin-bottom: var(--rem-20);
    }
  }
  .invite-friends-h5-content{
    margin-top: var(--rem-20);
  }
  .invite-friends-h5-table{
    border-collapse: separate;
    border-spacing: 0;
    margin-top: var(--rem-15);
    color: #6b7180;
    text-align: center;
    width: 100%;
    background-color: var(--bg-table-header-h5);
    border: solid 1px var(--border-color);
    border-radius: var(--rem-10);
    border-style: hidden;
    overflow: hidden;
    th{
      box-sizing: border-box;
      width: 25%;
      background-color: var(--bg-table-header-h5);
      padding: var(--rem-10) 0;
      color: var(--font-def);
      border: 1px solid var(--border-color);
      text-align: center;
      font-size: 24rem;
      vertical-align: middle;
    }
    td{
      height: var(--rem-45);
      line-height: var(--rem-45);
      background-color: var(--z-bg-card);
      border: 1px solid var(--border-color);
    }
  }
  .invite-friends-h5-list{
    background-color: var(--z-bg-card);
    margin: 0 var(--rem-14) 0;
    border-radius: var(--rem-10);
    padding: var(--rem-20);
    dt{
      margin-bottom: var(--rem-5);
    }
    dd{
      display: flex;
      justify-content: space-between;
      p{
        span{
          display: block;
          color: var(--z-font-anti);
        }
      }
    }
  }
}
</style>
